<template>
    <div>
        <div demo-bg>
      <dv-border-box8 :dur="5" style="height:20.3em;">
        <div dv-bg>
          <div class="lis" ref="divs">
            <li>·</li>
            <p>销量排行榜</p>
          </div>
         <div class="divs" ref="divs"></div>
        </div>
      </dv-border-box8>
    </div>

    </div>
</template>

<script setup lang="ts">
import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3'
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
let divs = ref()
let seriesData = [10,25,16,46,17,30,10,25,16,17,30,10,25,]
let visualMapData: { gt: number; lte: number; color: string; }[] = []
seriesData.forEach((item,idx) =>{
   if(idx%2==0){
      visualMapData.push({
         gt:idx,
         lte: idx+1,
         color: '#5C92FF',
      })
   }else{
      visualMapData.push({
         gt:idx,
         lte: idx+1,
         color: '#34C783',
      })
   }
})
let resData = {
   xAxisData:['一月','二月','三月','四月','五月','七月','八月','九月','十月','十一月','十二月'],
   seriesData:seriesData,
   visualMapData:visualMapData
}
let option = {
  title:{
			text:'折线图',
			top:'10px',
			left:'10px',
			textStyle:{
				color:'#fff'
			}
		},
		tooltip: {
			show:true,
			trigger:'axis'
		},
		grid: {
			left: "30px",
			right: "30px",
			top: "100px",
			bottom: "30px",
			containLabel: true,
		},
		legend: {
			top: "40px",
			textStyle: {
				color: '#D9EFFF'
			}
		},
		xAxis: {
			type: "category",
			data: resData.xAxisData,
			boundaryGap: false,
			axisTick: {
				show: false,
			},
			axisLabel: {
				show: true,
				color: "#D9EFFF",
			},
			axisLine: {
				symbol: 'circle',
				lineStyle: {
					color: "#1396F9",
				},
			},
		},
		yAxis: [{
			name: "mg/m³",
			type: "value",
			nameTextStyle: {
				color: "#d3dee5",
				fontSize: 14,
			},
			lineStyle: {
				show: "none",
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: true,
				symbol: 'circle',
				lineStyle: {
					color: "#1396F9",
				},
			},
			axisLabel: {
				show: true,
				color: "#D9EFFF",
			},
			splitLine: {
				show: false,
				lineStyle: {
					color: "#1396F9",
				},
			},
		}],
		dataZoom: [{
			show: true,
			type:'slider',
			height: 12,
			bottom: 10,
			handleSize: "80%",
			handleStyle: {
				color: "#d3dee5",
			},
			textStyle: {
				color: "#061423",
				fontSize: 10,
			},
			startValue: 0,
			endValue: 6,
			brushSelect: false,
		},{
			type: 'inside',
			startValue: 0,
			endValue: 6,
		}],
		// 分段设置折线图颜色
		visualMap: [{
			type: 'piecewise',
			show: false, 
			dimension: 0, 
			seriesIndex:0, //第一部分数据  
			pieces: resData.visualMapData
		}],
		series: [{
			name: '原料气',
			data: resData.seriesData,
			smooth: true,
			type: "line",
			symbol: 'none',
			itemStyle: {
				color: "#34C783",
			},
			areaStyle: {
				//区域填充渐变颜色
				color: {
					type: "linear",
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
							offset: 0,
							color: "rgba(34, 255, 204, 0.5)", // 0% 处的颜色
						},
						{
							offset: 1,
							color: "rgba(34, 255, 204, 0.3)", // 100% 处的颜色
						},
					],
					global: false, // 缺省为 false
				},
			},
		}],
};

onMounted(() => {
  let myChart = echarts.init(divs.value);
  // 绘制图表
  myChart.setOption(option);
})

</script>

<style scoped lang="scss">
.div {
  height: 500px;

  .lis {
    display: flex;
    align-items: center;
    border-bottom: rgb(32, 124, 181) solid 1px;

    li {
      text-shadow: 0 0 7px rgb(191, 255, 254);
      margin-left: 20px;
      color: #18C7F2;
      font-size: 70px;
      list-style: none;
      line-height: 50px;
      padding-right: 10px;
      padding-bottom: 10px;
    }

    p {
      font-size: 20px;
    }
  }

 .divs{
    width: 100%;
    height: 260px;
 }

}
</style>